<template>
    <div class="top">
        <div class="bx">
            <div class="left">
                <div class="arrowLeft" @click="fun">
                    <van-icon name="arrow-left" size="0.36rem" color="#fff"/>
                </div>
                <div class="toggle">
                    <img src="https://gw.alicdn.com/imgextra/i3/O1CN01QHa3951DM6MVkxefG_!!6000000000201-2-tps-152-36.png_.webp" alt="" class="sale" @click="funSale">
                    <img src="https://gw.alicdn.com/imgextra/i3/O1CN015PxKX61KaU6l34skj_!!6000000001180-2-tps-168-36.png_.webp" alt="" class="play" @click="funPlay">
                    <div class="line" :class="{
                        eLeft:flag,
                        pLeft:!flag
                    }"></div>
                </div>
            </div>
            <div class="right">
                <div class="search">
                    <img src="https://gw.alicdn.com/imgextra/i2/O1CN01Wzz3oO2A1Xulj4jkT_!!6000000008143-2-tps-39-38.png_.webp" alt="">
                </div>
                <div class="tag">
                    <img src="https://gw.alicdn.com/imgextra/i1/O1CN01qp2rdQ1mBZpE78C94_!!6000000004916-2-tps-38-42.png_.webp" alt="">
                </div>
                <div class="dots">
                    <img src="https://gw.alicdn.com/imgextra/i2/O1CN01eBusoz1yJ9kucxDYZ_!!6000000006557-2-tps-40-12.png_.webp" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"everyNav",
    methods:{
        fun(){
            if(this.push){
                this.$router.push("/").catch(err=>{})
            } else {
                this.$router.push("/everyday").catch(err=>{})
            }
        },
        funSale(){
            this.$router.push("/everyday").catch(err=>{})
        },
        funPlay(){
            this.$router.push("/play").catch(err=>{})
        }
    },
    props:["flag","push"]
}
</script>

<style lang="scss" scoped>
   .top {
        width: 100%;
        height: 0.92rem;
        margin-bottom: 0.29rem;
   }
   .top .bx {
        width: 7.13rem;
        height: 0.92rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
   }
   .top .bx .left {
        display: flex;
   }
   .top .bx .left .arrowLeft {
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 0.25rem;
        border: 0.01rem solid #c65070;
        background: #af0632;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
   }
   .top .bx .left .toggle {
        margin-left: 0.1rem;
        display: flex;
        align-items: center;
        position: relative;
   }
   .top .bx .left .toggle .sale {
        width: 1.8rem;
        height: 0.43rem;
   }
   .top .bx .left .toggle .play {
        width: 1.8rem;
        height: 0.43rem;
        margin-left: 0.25rem;
   }
   .top .bx .left .toggle .line {
       width: 0.71rem;
       height: 0.07rem;
       background: #fff;
       border-radius: 0.04rem;
       position: absolute;
       bottom: -0.1rem;
   }
   .top .bx .left .toggle .eLeft {
        left: 0.52rem;
   }
   .top .bx .left .toggle .pLeft {
       left: 2.6rem;
   }
   .top .bx .right {
        width: 2.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
   }
   .top .bx .right img {
        width: 0.4rem;
        height: 0.4rem;
   }
   .top .bx .right .search {
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 0.25rem;
        border: 0.01rem solid #c65070;
        background: #af0632;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
   }
   .top .bx .right .tag {
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 0.25rem;
        border: 0.01rem solid #c65070;
        background: #af0632;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
   }
   .top .bx .right .dots {
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 0.25rem;
        border: 0.01rem solid #c65070;
        background: #af0632;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
   }
   .top .bx .right .dots img{
        width: 0.4rem;
        height: 0.12rem;
   }
</style>